<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>Document</title>
    <link rel="stylesheet" href="/css/reset.css">
    <link rel="stylesheet" href="/css/base.css">
    <link rel="stylesheet" href="/css/quoted_part.css">
    <script src="/js/miniprogram.js"></script>
    <script>
        var docEl = document.documentElement
        docEl.style.fontSize = (docEl.clientWidth / 750 * 100) + 'px'
    </script>
</head>
<body>
    <header class="header">
        <div class="logo"><img src="/img/logo.png"></div>
        <span class="nav-logo" onclick="toggleNav(event)"><img src="/img/nav-logo.png"></span>
        <div class="nav-warp" id="nav-warp">
            <a href="/" class="nav-cell">
                <span class="nav-cell-icon"><img src="/img/nav-icon-1.png"></span>
                <span class="nav-cell-txt">首页</span>
            </a>
            <a href="/brand_desc.html" class="nav-cell">
                <span class="nav-cell-icon"><img src="/img/nav-icon-2.png"></span>
                <span class="nav-cell-txt">品牌介绍</span>
            </a>
            <a href="/product_desc.html" class="nav-cell">
                <span class="nav-cell-icon"><img src="/img/nav-icon-3.png"></span>
                <span class="nav-cell-txt">产品介绍</span>
            </a>
            <a class="nav-cell" onclick="toggleNavProduct(this, event)" id="nav-cell-sub">
                <span class="nav-cell-icon"><img src="/img/nav-icon-4.png"></span>
                <span class="nav-cell-txt">产品报价</span>
            </a>
            <a href="/dealer_login.html" class="nav-cell">
                <span class="nav-cell-icon"><img src="/img/nav-icon-5.png"></span>
                <span class="nav-cell-txt">经销商登录</span>
            </a>
            <a href="/quailty_search.html" class="nav-cell">
                <span class="nav-cell-icon"><img src="/img/nav-icon-6.png"></span>
                <span class="nav-cell-txt">质保查询</span>
            </a>
            <a href="/example.html" class="nav-cell">
                <span class="nav-cell-icon"><img src="/img/nav-icon-7.png"></span>
                <span class="nav-cell-txt">案例展示</span>
            </a>
            <a href="/news.html" class="nav-cell">
                <span class="nav-cell-icon"><img src="/img/nav-icon-8.png"></span>
                <span class="nav-cell-txt">资讯活动</span>
            </a>
            <a href="/store.html" class="nav-cell">
                <span class="nav-cell-icon"><img src="/img/nav-icon-9.png"></span>
                <span class="nav-cell-txt">合作门店</span>
            </a>
        </div>
        <div class="sub-nav" id="sub-nav" style="display: none;">
            <a href="/quoted_category_transparent.html" class="nav-cell">
                <span class="nav-cell-txt">透明膜报价</span>
            </a>
            <a href="/quoted_category_color.html" class="nav-cell">
                <span class="nav-cell-txt">CA改色膜报价</span>
            </a>
        </div>
        <div class="search"><img src="/img/icon-search.png" alt=""></div>
        <script>
            function toggleNav(event) {
                event.stopPropagation()
                var dom = document.getElementById('nav-warp')
                var classes = dom.getAttribute('class').split(' ')
                if (classes.indexOf('active') > -1) {
                    dom.setAttribute('class', classes.filter(i => i !== 'active').join(' '))
                } else {
                    classes.push('active')
                    dom.setAttribute('class', classes.join(' '))
                }
                hideeNavProduct(document.getElementById('nav-cell-sub'))
            }
            document.addEventListener('click', (e) => {
                var dom = document.getElementById('nav-warp')
                var classes = dom.getAttribute('class').split(' ')
                if (classes.indexOf('active') > -1) {
                    dom.setAttribute('class', classes.filter(i => i !== 'active').join(' '))
                }
                hideeNavProduct(document.getElementById('nav-cell-sub'))
            })
            // 点击产品报价
            function toggleNavProduct(dom, e) {
                e.stopPropagation()
                var classes = dom.getAttribute('class').split(' ')
                if (classes.indexOf('active') > -1) {
                    hideeNavProduct(dom)
                } else {
                    showNavProduct(dom)
                }
            }
            function showNavProduct (dom) {
                var classes = dom.getAttribute('class').split(' ')
                classes.push('active')
                document.getElementById('sub-nav').style.display = 'block'
                dom.setAttribute('class', classes.join(' '))
            }
            function hideeNavProduct (dom) {
                var classes = dom.getAttribute('class').split(' ')
                classes = classes.filter(i => i !== 'active')
                document.getElementById('sub-nav').style.display = 'none'
                dom.setAttribute('class', classes.join(' '))
            }
        </script>
    </header>
    <div class="quoted-part" style="background-color: #171717;">
        <div class="title">
            <h3 class="title-wrap">
                <div class="brand">奔驰长轴距C级轿车</div>
                <div class="name">pro透明系列</div>
                <!-- <span class="icon"><img src="/img/quoted-part-title-icon.png" width="100%"></span> -->
            </h3>
        </div>
        <div class="wrap">
            <!-- 整车报价 -->
            <div class="part-price__btn" onclick="showPartPrice(this)">
                <span class="text">整车报价</span>
                <span class="icon"><img src="/img/quoted-part-title-icon.png" width="100%"></span>
            </div>
            <div class="part-price" id="part-price">
                <div class="list">
                    <div class="btn-cell" value="45" onclick="selectCarPart(this)" name="whole">
                        <div class="icon"><img src="/img/quoted-part-icon-zhengche.png" width="50%"></div>
                        <span>整车</span>
                    </div>
                    <div class="btn-cell" value="3" onclick="selectCarPart(this)" style="pointer-events: none" name="cheding">
                        <div class="icon"><img src="/img/quoted-part-icon-cheding.png" width="40%"></div>
                        <span>车顶</span>
                    </div>
                    <div class="btn-cell" value="3" onclick="selectCarPart(this)" style="pointer-events: none" name="hougai">
                        <div class="icon"><img src="/img/quoted-part-icon-hougai.png" width="40%"></div>
                        <span>后盖</span>
                    </div>
                    <div class="btn-cell" value="9" onclick="selectCarPart(this)" style="pointer-events: none" name="hougang">
                        <div class="icon"><img src="/img/quoted-part-icon-hougang.png" width="60%"></div>
                        <span>后杠</span>
                    </div>
                    <div class="btn-cell" value="5" onclick="selectCarPart(this)" style="pointer-events: none" name="houshijing">
                        <div class="icon"><img src="/img/quoted-part-icon-houshijing.png" width="60%"></div>
                        <span>后视镜</span>
                    </div>
                    <div class="btn-cell" value="2" onclick="selectCarPart(this)" style="pointer-events: none" name="jigai">
                        <div class="icon"><img src="/img/quoted-part-icon-jigai.png" width="60%"></div>
                        <span>机盖</span>
                    </div>
                    <div class="btn-cell" value="1" onclick="selectCarPart(this)" style="pointer-events: none" name="qiangang">
                        <div class="icon"><img src="/img/quoted-part-icon-qiangang.png" width="60%"></div>
                        <span>前杠</span>
                    </div>
                    <div class="btn-cell" value="6" onclick="selectCarPart(this)" style="pointer-events: none" name="youcequn">
                        <div class="icon"><img src="/img/quoted-part-icon-youcequn.png" width="60%"></div>
                        <span>右侧裙</span>
                    </div>
                    <div class="btn-cell" value="4" onclick="selectCarPart(this)" style="pointer-events: none" name="youhouyezi">
                        <div class="icon"><img src="/img/quoted-part-icon-youhouyezi.png" width="40%"></div>
                        <span>右后叶子板</span>
                    </div>
                    <div class="btn-cell" value="7" onclick="selectCarPart(this)" style="pointer-events: none" name="youmenzuhe">
                        <div class="icon"><img src="/img/quoted-part-icon-youmenzuhe.png" width="40%"></div>
                        <span>右门组合</span>
                    </div>
                    <div class="btn-cell" value="4" onclick="selectCarPart(this)" style="pointer-events: none" name="youqianyezi">
                        <div class="icon"><img src="/img/quoted-part-icon-youqianyezi.png" width="40%"></div>
                        <span>右前叶子板</span>
                    </div>
                    <div class="btn-cell" value="6" onclick="selectCarPart(this)" style="pointer-events: none" name="zuocequn">
                        <div class="icon"><img src="/img/quoted-part-icon-zuocequn.png" width="60%"></div>
                        <span>左侧裙</span>
                    </div>
                    <div class="btn-cell" value="8" onclick="selectCarPart(this)" style="pointer-events: none" name="zuohouyezi">
                        <div class="icon"><img src="/img/quoted-part-icon-zuohouyezi.png" width="60%"></div>
                        <span>左后叶子板</span>
                    </div>
                    <div class="btn-cell" value="7" onclick="selectCarPart(this)" style="pointer-events: none" name="zuomenzuhe">
                        <div class="icon"><img src="/img/quoted-part-icon-zuomenzuhe.png" width="40%"></div>
                        <span>左门组合</span>
                    </div>
                    <div class="btn-cell" value="4" onclick="selectCarPart(this)" style="pointer-events: none" name="zuoqianyezi">
                        <div class="icon"><img src="/img/quoted-part-icon-zuoqianyezi.png" width="40%"></div>
                        <span>左前叶子板</span>
                    </div>
                </div>
            </div>
            <!-- 部位 -->
            <div class="car" id="car">
                <div class="car-part-whole" id="whole">
                    <img src="/img/quoted-part/bg.jpg">
                </div>
                <div class="car-part" id="cheding" style="display: none">
                    <img src="/img/quoted-part/车顶.png">
                </div>
                <div class="car-part" id="hougai" style="display: none">
                    <img src="/img/quoted-part/后盖.png">
                </div>
                <div class="car-part" id="hougang" style="display: none">
                    <img src="/img/quoted-part/后杠.png">
                </div>
                <div class="car-part" id="houshijing" style="display: none">
                    <img src="/img/quoted-part/后视镜.png">
                </div>
                <div class="car-part" id="jigai" style="display: none">
                    <img src="/img/quoted-part/机盖.png">
                </div>
                <div class="car-part" id="qiangang" style="display: none">
                    <img src="/img/quoted-part/前杠.png">
                </div>
                <div class="car-part" id="youcequn" style="display: none">
                    <img src="/img/quoted-part/右侧裙.png">
                </div>
                <div class="car-part" id="youhouyezi" style="display: none">
                    <img src="/img/quoted-part/右后叶子板.png">
                </div>
                <div class="car-part" id="youmenzuhe" style="display: none">
                    <img src="/img/quoted-part/右门组合.png">
                </div>
                <div class="car-part" id="youqianyezi" style="display: none">
                    <img src="/img/quoted-part/右前叶子板.png">
                </div>
                <div class="car-part" id="zuocequn" style="display: none">
                    <img src="/img/quoted-part/左侧裙.png">
                </div>
                <div class="car-part" id="zuohouyezi" style="display: none">
                    <img src="/img/quoted-part/左后叶子板.png">
                </div>
                <div class="car-part" id="zuomenzuhe" style="display: none">
                    <img src="/img/quoted-part/左门组合.png">
                </div>
                <div class="car-part" id="zuoqianyezi" style="display: none">
                    <img src="/img/quoted-part/左前叶子板.png">
                </div>
            </div>
            <!-- 局部报价 -->
            <div class="price-detail__btn" onclick="showPriceDeatil(this)">
                <span class="text">局部报价</span>
                <span class="icon"><img src="/img/quoted-part-title-icon.png" width="100%"></span>
            </div>
            <!-- <div class="price-detail" id="price-detail">
                <div class="price-detail_wrap">
                    <div class="title">报价详情</div>
                    <div class="list">
                        <div class="detail-cell" onclick="selectCarPart(this)" id="detail-cheding" style="display: none;">
                            <div class="icon"><img src="/img/quoted-part-icon-cheding-w.png" width="40%"></div>
                            <div class="text">
                                <p class="part-name">车顶</p>
                                <p class="money">￥3</p>
                            </div>
                        </div>
                        <div class="detail-cell" onclick="selectCarPart(this)" id="detail-hougai" style="display: none;">
                            <div class="icon"><img src="/img/quoted-part-icon-hougai-w.png" width="40%"></div>
                            <div class="text">
                                <p class="part-name">后盖</p>
                                <p class="money">￥3</p>
                            </div>
                        </div>
                        <div class="detail-cell" onclick="selectCarPart(this)" id="detail-hougang" style="display: none;">
                            <div class="icon"><img src="/img/quoted-part-icon-hougang-w.png" width="60%"></div>
                            <div class="text">
                                <p class="part-name">后杠</p>
                                <p class="money">￥9</p>
                            </div>
                        </div>
                        <div class="detail-cell" onclick="selectCarPart(this)" id="detail-houshijing" style="display: none;">
                            <div class="icon"><img src="/img/quoted-part-icon-houshijing-w.png" width="60%"></div>
                            <div class="text">
                                <p class="part-name">后视镜</p>
                                <p class="money">￥5</p>
                            </div>
                        </div>
                        <div class="detail-cell" onclick="selectCarPart(this)" id="detail-jigai" style="display: none;">
                            <div class="icon"><img src="/img/quoted-part-icon-jigai-w.png" width="60%"></div>
                            <div class="text">
                                <p class="part-name">机盖</p>
                                <p class="money">￥2</p>
                            </div>
                        </div>
                        <div class="detail-cell" onclick="selectCarPart(this)" id="detail-qiangang" style="display: none;">
                            <div class="icon"><img src="/img/quoted-part-icon-qiangang-w.png" width="60%"></div>
                            <div class="text">
                                <p class="part-name">前杠</p>
                                <p class="money">￥1</p>
                            </div>
                        </div>
                        <div class="detail-cell" onclick="selectCarPart(this)" id="detail-youcequn" style="display: none;">
                            <div class="icon"><img src="/img/quoted-part-icon-youcequn-w.png" width="60%"></div>
                            <div class="text">
                                <p class="part-name">右侧裙</p>
                                <p class="money">￥6</p>
                            </div>
                        </div>
                        <div class="detail-cell" onclick="selectCarPart(this)" id="detail-youhouyezi" style="display: none;">
                            <div class="icon"><img src="/img/quoted-part-icon-youhouyezi-w.png" width="60%"></div>
                            <div class="text">
                                <p class="part-name">右后叶子板</p>
                                <p class="money">￥8</p>
                            </div>
                        </div>
                        <div class="detail-cell" onclick="selectCarPart(this)" id="detail-youmenzuhe" style="display: none;">
                            <div class="icon"><img src="/img/quoted-part-icon-youmenzuhe-w.png" width="40%"></div>
                            <div class="text">
                                <p class="part-name">左门组合</p>
                                <p class="money">￥7</p>
                            </div>
                        </div>
                        <div class="detail-cell" onclick="selectCarPart(this)" id="detail-youqianyezi" style="display: none;">
                            <div class="icon"><img src="/img/quoted-part-icon-youqianyezi-w.png" width="40%"></div>
                            <div class="text">
                                <p class="part-name">右前叶子板</p>
                                <p class="money">￥4</p>
                            </div>
                        </div>
                        <div class="detail-cell" onclick="selectCarPart(this)" id="detail-zuocequn" style="display: none;">
                            <div class="icon"><img src="/img/quoted-part-icon-zuocequn-w.png" width="60%"></div>
                            <div class="text">
                                <p class="part-name">左侧裙</p>
                                <p class="money">￥6</p>
                            </div>
                        </div>
                        <div class="detail-cell" onclick="selectCarPart(this)" id="detail-zuohouyezi" style="display: none;">
                            <div class="icon"><img src="/img/quoted-part-icon-zuohouyezi-w.png" width="60%"></div>
                            <div class="text">
                                <p class="part-name">左后叶子板</p>
                                <p class="money">￥8</p>
                            </div>
                        </div>
                        <div class="detail-cell" onclick="selectCarPart(this)" id="detail-zuomenzuhe" style="display: none;">
                            <div class="icon"><img src="/img/quoted-part-icon-zuomenzuhe-w.png" width="40%"></div>
                            <div class="text">
                                <p class="part-name">左门组合</p>
                                <p class="money">￥7</p>
                            </div>
                        </div>
                        <div class="detail-cell" onclick="selectCarPart(this)" id="detail-zuoqianyezi" style="display: none;">
                            <div class="icon"><img src="/img/quoted-part-icon-zuoqianyezi-w.png" width="40%"></div>
                            <div class="text">
                                <p class="part-name">左前叶子板</p>
                                <p class="money">￥4</p>
                            </div>
                        </div>
                        <div class="tip" id="tip">
                            暂无
                        </div>
                    </div>
                    <div class="total">
                        <span>总价：</span>
                        ￥<span id="detail-total-money">0</span>
                    </div>
                    <div class="close" onclick="closePricDetail()">+</div>
                </div>
            </div> -->
            <div class="price-detail-new" id="price-detail-new" style="display: none;">
                <div class="content">
                    <div class="title">改色膜局部报价详情</div>
                    <div class="tip">
                        <p>局部价格计算方式： </p>
                        <p>以下比例均为局部对整车价格的比例。如有特殊情况请适 用类似情况计算。</p>
                    </div>
                    <div class="table">
                        <table>
                            <tr class="head">
                                <td>分类</td>
                                <td>敝篷跑车</td>
                                <td>跑车</td>
                                <td>三厢/两厢/SUV</td>
                            </tr>
                            <tr>
                                <td>前杠</td>
                                <td>20%</td>
                                <td>20%</td>
                                <td>15%</td>
                            </tr>
                            <tr>
                                <td>后杠</td>
                                <td>20%</td>
                                <td>20%</td>
                                <td> 15%</td>
                            </tr>
                            <tr>
                                <td>引擎盖</td>
                                <td>10%</td>
                                <td>10%</td>
                                <td>10%</td>
                            </tr>
                            <tr>
                                <td>顶棚</td>
                                <td>-</td>
                                <td>20%</td>
                                <td>20%</td>
                            </tr>
                            <tr>
                                <td>后备厢</td>
                                <td>10%</td>
                                <td>10%</td>
                                <td>10%</td>
                            </tr>
                            <tr>
                                <td>侧/后叶</td>
                                <td>10%</td>
                                <td>10%</td>
                                <td>20%</td>
                            </tr>
                            <tr>
                                <td>前门</td>
                                <td>10%</td>
                                <td>10%</td>
                                <td>10%</td>
                            </tr>
                            <tr>
                                <td>后门/风柱</td>
                                <td>10%</td>
                                <td>10%</td>
                                <td>10%</td>
                            </tr>
                            <tr>
                                <td>前叶</td>
                                <td>10%</td>
                                <td>10%</td>
                                <td>10%</td>
                            </tr>
                        </table>
                    </div>
                    <div class="close" onclick="closePricDetail()">+</div>
                </div>
            </div>
        </div>
        <div class="total">
            <div class="total-content">
                总价：￥<span id="total-money">0</span>
            </div>
        </div>
        <script>
            // 显示部位报价
            function showPartPrice(e) {
                e.style.display = 'none'
                var dom = document.getElementById('part-price')
                var width = dom.clientWidth
                if (dom.style.transform != 'translateX(0px)') {
                    dom.style.transform = 'translateX(0px)'
                    document.getElementById('car').style.transform = `translateX(${width / 2}px)`
                } else {
                    dom.style.transform = 'translateX(-100%)'
                    document.getElementById('car').style.transform = 'translateX(0px)'
                }
            }

            // 选择车部位
            function selectCarPart(dom) {
                // document.getElementById('tip').style.display = 'none'

                var carPartName = dom.getAttribute('name')
                var partBtnDoms = [].slice.call(document.getElementById('part-price').querySelectorAll('.btn-cell'))
                var carPartDoms = [].slice.call(document.getElementById('car').querySelectorAll('.car-part'))
                // var detailCellDoms = [].slice.call(document.getElementById('price-detail').querySelectorAll('.detail-cell'))
                if (carPartName == 'whole') {
                    partBtnDoms.forEach(element => {
                        var domCalss = dom.getAttribute('class').split(' ')
                        domCalss = domCalss.filter(i => i !== 'active')
                        element.setAttribute('class', domCalss.join(' '))
                        if (dom !== element) {
                            element.style.opacity = 0.7
                        }
                    })

                    carPartDoms.forEach(element => {
                        element.style.display = 'block'
                    })

                    // detailCellDoms.forEach(element => {
                    //     element.style.display = 'flex'
                    // })
                } else {
                    var partBtnDoms_whole = partBtnDoms.find(i => i.getAttribute('name') == 'whole')
                    if (partBtnDoms_whole.getAttribute('class').indexOf('active') > -1) {
                        carPartDoms.forEach(element => {
                            element.style.display = 'none'
                        })
                        var classes = partBtnDoms_whole.getAttribute('class').split(' ')
                        classes = classes.filter(i => i !== 'active')
                        partBtnDoms_whole.setAttribute('class', classes.join(' '))

                        // detailCellDoms.forEach(element => {
                        //     element.style.display = 'none'
                        // })

                        partBtnDoms.forEach(element => {
                            element.style.opacity = 1
                        })
                    }
                }

                var carPartDom = document.getElementById(dom.getAttribute('name'))
                var domCalss = dom.getAttribute('class').split(' ')
                var detailCellDom = document.getElementById('detail-' + carPartName)
                if (domCalss.indexOf('active') > -1) {
                    domCalss = domCalss.filter(i => i !== 'active')
                    carPartDom.style.display = 'none'
                    if (detailCellDom) {
                        detailCellDom.style.display = 'none'
                    }
                    
                } else {
                    domCalss.push('active')
                    carPartDom.style.display = 'block'
                    if (detailCellDom) {
                        detailCellDom.style.display = 'flex'
                    }
                }
                dom.setAttribute('class', domCalss.join(' '))

                // 计算总额
                var activeDomValue = partBtnDoms.filter(i => i.getAttribute('class').indexOf('active') > -1).map(i => i.getAttribute('value') - 0)
                var totalMoney = activeDomValue.reduce((i, j) => i+j)
                document.getElementById('total-money').innerText = totalMoney
                // document.getElementById('detail-total-money').innerText = totalMoney
            }

            // 显示报价详情
            function showPriceDeatil(e) {
                var dom = document.getElementById('price-detail-new')
                dom.style.display = 'block'
            }

            // 关闭报价详情
            function closePricDetail () {
                var dom = document.getElementById('price-detail-new')
                dom.style.display = 'none'
            }
            
            // // 显示报价详情
            // function showPriceDeatil(e) {

            //     // e.style.display = 'none'
            //     var dom = document.getElementById('price-detail')
            //     var width = dom.clientWidth
            //     if (dom.style.transform != 'translateX(0px)') {
            //         dom.style.transform = 'translateX(0px)'
            //     } else {
            //         dom.style.transform = `translateX(${width}px)`
            //     }
            // }

            // // 关闭报价详情
            // function closePricDetail () {
            //     var dom = document.getElementById('price-detail')
            //     var width = dom.clientWidth
            //     dom.style.transform = `translateX(${width}px)`
            // }
       </script>
    </div>
    <footer class="footer">
        <!-- <div class="link">
            <a href="/quailty_search.html" class="link-cell">质保查询</a>
            <a href="/dealer_login.html" class="link-cell">经销商登录</a>
            <a href="/quoted_part.html" class="link-cell">产品报价</a>
            <a href="/product_desc.html" class="link-cell">产品介绍</a>
        </div> -->
        <div class="phone">服务热线：<a href="tel:4001 618 615">4001 618 615</a></div>
        <div class="company">运营商:拜亚(山东)薄膜有限公司</div>
        <div class="beian">粤ICP备05108632号- 13</div>
    </footer>
    <div class="mini-menu">
        <a href="/" class="cell active">
            <div class="icon"></div>
            <div class="name">首页</div>
        </a>
        <a href="/product_desc.html" class="cell">
            <div class="icon"></div>
            <div class="name">产品</div>
        </a>
        <a href="/quoted.html" class="cell">
            <div class="icon"></div>
            <div class="name">报价</div>
        </a>
        <a href="/example.html" class="cell">
            <div class="icon"></div>
            <div class="name">案例</div>
        </a>
        <a href="/mine.html" class="cell">
            <div class="icon"></div>
            <div class="name">我的</div>
        </a>
    </div>
</body>
</html>